'use strict'
import React from 'react'
import ReactDom from 'react-dom'
import 'scss/tipPop.scss'

class TipPop {
    constructor() {}
    close() {
        ReactDom.unmountComponentAtNode(document.getElementById('tipPop'))
        $('#tipPop').remove()
    }
    openPanel(opts) {
        console.log(opts)
        opts = opts || {}
        let contentNode,
            confirmNode,
            cancelNode,
            titleNode
        let config = {
            title: opts.title || null,
            message: opts.message || '',
            cancelText: opts.cancelText || '取消',
            confirmText: opts.confirmText || '确定',
            onCancel: opts.onCancel || this.close,
            onConfirm: opts.onConfirm || this.close,
            showCancelButton: opts.showCancelButton === false
                ? false
                : true,
            showConfirmButton: opts.showConfirmButton === false
                ? false
                : true
        }
        if (config.message) {
            contentNode = <div className="text-center">
                {config.message}
            </div>
        }
        if (opts.showConfirmButton) {
            confirmNode = <button className="btn confirm-btn" onClick={config.onConfirm}>{config.confirmText}</button>
        }
        if (opts.showCancelButton) {
            cancelNode = <button className="btn cancel-btn" onClick={config.onCancel}>{config.cancelText}</button>
        }
        if (opts.title) {
            titleNode = <div className="text-center">{opts.title}</div>
        }

        if (!document.getElementById('tipPop')) {
            $('body').append('<div id="tipPop"></div>')
        }

        ReactDom.render(
            <div className="tipPop flex jc-center ai-center">
            <div className="bg" onClick={this.close}></div>

            <div className="content">
                {titleNode}{contentNode}
                <div className='flex jc-around'>{cancelNode}{confirmNode}</div>
            </div>
        </div>, document.getElementById('tipPop'))
    }
}

export let tipPop = new TipPop()
